<template>
	<div class="goods-view" :style="{ backgroundColor: modelData.bgColor || '#f5f9fc' }">
		<div class="goods-div" :class="[modelData.type === 2 ? 'show-scroll' : '']">
			<ul v-if="modelData.colNum === 1">
				<li class="clearfix goods-box" v-for="(item, index) in goodsList" :key="index" @click="goPage(`/pages/goods/GoodsDetail?id=${item.id}`)">
					<image class="goods-img-one float_left" :src="item.images[0]" mode="aspectFill"></image>
					<div class="float_left goods-info">
						<div class="goods-name goods-one-name" v-if="modelData.goodsInfo.includes(1)">
							<!-- <text v-if="item.brandName" class="brandName-text">{{ item.brandName }}</text> -->
							{{ item.title }}
						</div>
						<div class="goods-one-hot ellipsis" v-if="modelData.goodsInfo.includes(4)">{{ item.describe }}</div>

						<div class="goods-price clearfix" style="padding-top: 10upx;">
							<view class="float_left">
								<block v-if="isShowPrice">
									<view class="now-price">
										<block v-if="modelData.goodsInfo.includes(2)">
											<text class="rmb-icon">¥</text>
											<text style="font-size: 32rpx;">{{ item.minSalePrice }}</text>
										</block>
										<text class="y-price" v-if="modelData.goodsInfo.includes(3)">¥{{ item.maxMarketPrice }}</text>
									</view>
								</block>
								<block v-else><view class="now-price" v-if="modelData.goodsInfo.includes(2)">请登录</view></block>
								<div class="goods-one-sale" v-if="modelData.goodsInfo.includes(5) && isSalesNum === 5">
									已售
									<text>100</text>
									<text>件</text>
								</div>
							</view>
							<div class="float_right add-Car-div" @click.stop="openPopSku(item)" style="transform: translateY(2rpx);">
								<text class="ibonfont ibongouwuche1"></text>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="goods-two" v-else-if="modelData.colNum === 2">
				<div class="goods-two-li" style="width: 50%" v-for="(item, index) in goodsList" :key="index">
					<div class="goods-li" @click="goPage(`/pages/goods/GoodsDetail?id=${item.id}`)">
						<div class="goods-img-box"><image class="goods-img" :src="item.images[0]" mode="aspectFill" style="height:340upx"></image></div>
						<div class="goods-info-box">
							<div v-if="modelData.goodsInfo.includes(1)" class="goods-name">{{ item.title }}</div>
							<div class="goods-desc ellipsis" v-if="modelData.goodsInfo.includes(6)">{{ item.describe }}</div>
							<block v-if="isShowPrice">
								<div class="goods-price clearfix">
									<text class="now-price" v-if="modelData.goodsInfo.includes(2)" :style="{ fontSize: modelData.colNum === 2 ? '32rpx' : '28rpx' }">
										<text class="rmb-icon">¥</text>
										{{ item.minSalePrice }}
									</text>
								</div>
								<view class="y-price" v-if="modelData.goodsInfo.includes(3)">
									<text>¥{{ item.maxMarketPrice }}</text>
								</view>
							</block>
							<block v-else>
								<view class="goods-price"><text class="now-price" v-if="modelData.goodsInfo.includes(2)">请登录</text></view>
							</block>
							<div class="add-Car-div" @click.stop="openPopSku(item)" style="transform: translateY(2rpx);">
								<text class="ibonfont ibongouwuche1"></text>
								<!-- <text class="ibonfont ibonxinzeng1"></text> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="more-col-view" v-else>
				<div class="more-col-li" :style="{ width: 100 / modelData.colNum + '%' }" v-for="(item, index) in goodsList" :key="index">
					<div class="goods-li" @click="goPage(`/pages/goods/GoodsDetail?id=${item.id}`)">
						<div class="goods-img-box"><image class="goods-img" :src="item.images[0]" mode="aspectFill"></image></div>
						<div class="goods-info-box">
							<view v-if="modelData.goodsInfo.includes(1)" class="goods-name-colNum3">{{ item.title }}</view>
							<view class="goods-price clearfix" v-if="isShowPrice">
								<text class="now-price" v-if="modelData.goodsInfo.includes(2)">¥{{ item.minSalePrice }}</text>
								<text class="y-price" v-if="modelData.goodsInfo.includes(3)">¥{{ item.maxMarketPrice }}</text>
							</view>
							<view class="goods-price" v-else><text class="now-price" v-if="modelData.goodsInfo.includes(2)">请登录</text></view>
						</div>
					</div>
				</div>
			</div>
		</div>
		<AddCardModel @close="closeaddcartPop" :isShow="show_sku" :goodsId="goods_id"></AddCardModel>
		<NoLoginTip v-if="tip_show === true" :show="tip_show" @cancel="tip_show = false"></NoLoginTip>
	</div>
</template>

<script>
import AddCardModel from '@/components/AddCardModel';
import NoLoginTip from '@/components/NoLoginTip.vue';
export default {
	name: 'GoodsGroup',
	components: {
		AddCardModel,
		NoLoginTip
	},
	computed: {
		stockDisplay() {
			const stockDisplay = this.$store.state.basicSet.stockDisplay || 6;
			return parseInt(stockDisplay);
		},
		isSalesNum() {
			const isSalesNum = this.$store.state.basicSet.isSalesNum || 5;
			return parseInt(isSalesNum);
		},
		isShowPrice() {
			const isShowPrice = this.$store.state.basicSet.goodsPrice || 5;
			if (this.$store.state.hasLogin) {
				return true;
			} else {
				return parseInt(isShowPrice) === 5;
			}
		},
		hasLogin() {
			return this.$store.state.hasLogin;
		}
	},
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {
					colNum: 1,
					type: 2, // 显示类型，1列表平铺，2列表滑动
					goodsInfo: [1, 2, 3, 4, 5]
				};
			}
		},
		goodsList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		selAddress: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			tip_show: false,
			source: '',
			tab_index: 0,
			tab_goods_list: [],
			add_goods: {
				images: []
			},
			buyNum: 1,
			goodsindex: 0,
			goods_id: 0,
			add_sku: {},
			show_sku: false,
			selAddressD: {}
		};
	},
	watch: {
		selAddress(val) {
			this.selAddressD = val;
		}
	},
	created() {},
	methods: {
		//打开加入购物车弹窗
		openPopSku(row) {
			if (!this.hasLogin) {
				this.tip_show = true;
				return;
			}
			if (row.specType === 5) {
				this.show_sku = true;
				this.goods_id = row.id;
			} else {
				this.getGoodsDetail(row.id);
			}
		},
		closeaddcartPop() {
			this.show_sku = false;
		},
		//  获取商品详情
		getGoodsDetail(id) {
			this.$u.api.getGoodsDetail(id).then(({ data }) => {
				this.addCart(id, data.specMultiple[0].skuId);
			});
		},
		// 加入购物车
		addCart(id, skuId) {
			this.$u.api
				.addCart({
					goodsId: id,
					skuId: skuId,
					buyNum: 1
				})
				.then(res => {
					this.$u.toast('已加入购物车');
				});
		}
	}
};
</script>

<style lang="scss">
.goods-div {
	width: 726upx;
	margin: 0 auto;
}

.show-scroll {
	height: 408upx;
	overflow: hidden;
}

.goods-name {
	font-size: 26upx;
	/*margin-bottom: 10upx;*/
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 36upx;
	height: 72upx;
}
.goods-describe {
	font-size: 20upx;
	font-weight: 300;
	color: #666;
	height: 36upx;
	line-height: 36upx;
	-webkit-line-clamp: 1;
}
.brandName-text {
	display: inline-block;
	margin-right: 10rpx;
	padding: 0 6upx;
	border-radius: 4upx;
	font-size: 28upx;
	display: inline-block;
	background-color: #ffeaee;
	color: #ff3e68;
	margin-bottom: 6upx;
	vertical-align: middle;
}
.goods-price {
	.now-price {
		color: $price-color;
		font-size: 32upx;
		line-height: 40upx;
	}
	.rmb-icon {
		font-size: 22upx;
		font-weight: 400;
		margin-right: 6upx;
	}
}
.y-price {
	color: #999;
	text-decoration: line-through;
	line-height: 32upx;
	font-weight: 400;
	font-size: 22upx;
}

.goods-box {
	padding: 20upx;
	border-radius: 10upx;
	margin-bottom: 20upx;
	background-color: #ffffff;
	width: 706upx;
	margin: 20upx auto;
	.goods-price {
		.y-price {
			padding-left: 10upx;
		}
	}
	.goods-info {
		padding-left: 20upx;
		width: 460upx;
		.goods-one-name {
			width: 100%;
			margin-bottom: 24upx;
			font-size: 28upx;
			line-height: 40upx;
			height: 80upx;
		}
		.goods-one-hot {
			font-size: 24upx;
			color: #999999;
			height: 32upx;
			line-height: 32upx;
			-webkit-line-clamp: 1;
			width: 100%;
		}
	}
}

.goods-img-one {
	width: 200upx;
	height: 200upx;
	border-radius: 10upx;
}

.goods-one-sale {
	font-size: 24upx;
	color: #999;
}

.more-col-view {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: 12upx;
	width: 706upx;
	margin: 0 auto;
	.more-col-li {
		padding: 0 1upx 2upx;
		.goods-li {
			background-color: #ffffff;
			.goods-img-box {
				.goods-img {
					width: 100%;
					height: 233upx;
					display: block;
				}
			}
			.goods-info-box {
				.goods-name-colNum3 {
					font-size: 24upx;
					/*margin-bottom: 10upx;*/
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					line-height: 32upx;
					height: 64upx;
				}
				padding: 20upx 16upx 16upx;
				.goods-price {
					padding-top: 8upx;
					.now-price {
						font-size: 26upx;
					}
					.y-price {
						font-size: 20upx;
						padding-left: 10upx;
					}
				}
				.goods-desc {
					margin: 8upx 0;
					font-size: 24upx;
					color: #999999;
					-webkit-line-clamp: 1;
					width: 100%;
					height: 32upx;
					line-height: 32upx;
				}
			}
		}
	}
}
// 加入购物车按钮
.add-Car-div {
	.ibonfont {
		color: $uni-color-primary;
		font-size: 40upx;
		display: inline-block;
	}
	.ibongouwuche {
		width: 50upx;
		height: 50upx;
		display: block;
		border-radius: 100%;
		text-align: center;
		line-height: 50upx;
	}
}
.goods-two {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	overflow: hidden;
	.goods-two-li {
		padding: 0 10upx 20upx;
		.goods-li {
			border-radius: 12upx;
			overflow: hidden;
			background-color: #ffffff;
			.goods-img-box {
				.goods-img {
					width: 100%;
					height: 340upx;
					display: block;
				}
			}
			.goods-info-box {
				position: relative;
				padding: 20upx 16upx 16upx;
				.goods-desc {
					margin-top: 8upx;
					font-size: 24upx;
					color: #999999;
					-webkit-line-clamp: 1;
					width: 100%;
					height: 32upx;
					line-height: 32upx;
				}
				.goods-price {
					padding-top: 8upx;
				}
				.add-Car-div {
					position: absolute;
					right: 24upx;
					bottom: 16upx;
				}
			}
		}
	}
}
</style>
